<template>
  <div>
    <div class="dashboard-container">
      <span class="little"></span>
      <div class="dashboard-text">管理员管理中心</div>
    </div>
    <div class="admincardbox">
      <el-card class="admincard">
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%" :border="false" :show-overflow-tooltip="false" stripe
          class="bigtable">
          <el-table-column type="index" label="序号" width="200px">
          </el-table-column>
          <el-table-column label="管理员账号" width="300px">
            <template slot-scope="{row}">
              {{ row.username }}
            </template>
          </el-table-column>
          <el-table-column label="管理员手机号">
            <template slot-scope="{row}">
              {{ row.phone }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="{row}">
              <span style="color: #437efd;cursor: pointer;" @click="passworddialog(row.id,row)">修改密码</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :visible.sync="dialogVisible" title="修改密码" class="dialog"  :showClose="false">
        <el-form :model="form" ref="form" :rules="rules" label-width="120px">
          <!-- <el-form-item label="管理员名称" prop="adminname">
            <el-input v-model="form.adminname" type="text" prefix-icon="el-icon-user"></el-input>
          </el-form-item> -->
          <el-form-item label="请输入新密码" prop="password">
            <el-input v-model="form.password" type="password" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item label="请确认新密码" prop="confirmPassword">
            <el-input v-model="form.confirmPassword" type="password" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
        </el-form>
        <div class="footer" slot="footer">
          <el-button style="background-color: #437efd;color: aliceblue;" @click="submitForm('form')">确认修改</el-button>
          <el-button @click='closedialog' class="closedialog"  style="background: #fff;color: #437efd;">取消</el-button>
        </div>
      </el-dialog>
    </el-card>
    </div>
  </div>
</template>
dialogVisible = false
<script>
import { adminUser, updatePassword } from '@/api/user'
import elImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components:{
    elImageViewer
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      adminusername:'',
      form: {
        password: '',
        confirmPassword: '',
        adminname: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 8, message: '密码长度至少为8位', trigger: 'blur' },
          { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+~`\-={}[\]:;"'<>,.?/\\|])(?=.*[^\s]).{8,}$/, message: '密码必须是8位具有大小写字母、数字和字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.adminUser()
  },
  methods: {
    closedialog(){
      this.dialogVisible = false
      this.$forceUpdate()
      this.form =  {
        password: '',
        confirmPassword: '',
        adminname: ''
      }
      this.$refs.form.clearValidate();

    },
    passworddialog(id,row) {
      this.adminusername = row.username
      console.log(row);
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        console.log('0000')
        if (valid) {
          console.log('1111')
          const Base64 = require("js-base64").Base64
          let password = Base64.encode(this.form.password) // base64加密
          console.log('22222')
          this.form.password = password
          console.log('333333')
          updatePassword({ username:this.adminusername, password: this.form.password }).then(res => {
            if (res.data.state === 20000) {
              this.$message.success('修改密码成功')
              this.form = {
                password: '',
                confirmPassword: '',
                adminname: ''
              }
              this.dialogVisible = false
            } else {
              this.$message.error(res.data.message)
              this.dialogVisible = false
              this.form = {
                password: '',
                confirmPassword: '',
                adminname: ''
              }
            }
          })
        } else {
          return false;
        }
      });
    },
    async adminUser() {
      const res = await adminUser()
      this.tableData = res.data.data
    }
  }
}
</script>

<style lang="scss">
.dashboard-container {
  display: flex;
  padding: 10px 26px 7px 26px;
  overflow: hidden;
  .little {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #3064fc;
    margin-right: 6px;
  }

  .dashboard-text {
    font-size: 16px;
  }
}
::v-deep .admincard {
  // margin-top:-10px;
  width: 99%;
  height: 500px;
  margin-left: 8px;
  // margin-top: -20px;
  background-color: #fff;
  overflow:hidden
}

.table-container {
  // margin-top: 10px;
}

.table-container .el-table__header th {
  color: #216cff;
  font-size: 16px;
  background-color: #f3f6fb;
  /* border: 1px solid #e5e5e3; */
  text-align: center;
}

.table-container .el-table__body td {
  /* border: 1px solid #ddd; */
  text-align: center;
  font-weight: bold;
}

.dialog {
  width: 1000px;
  margin: auto;
}

.closedialog {
  width: 100px;
}

// .footer{
//   display: flex;
//   justify-content: center;
//   margin-top: 40px;
// }
</style>